<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body,.vueApp {
            overflow-y: scroll;
        }
        body {
            background-color: #fff;
            height: 100vh;
        }
        header {
            width: 100%;
            height: 44px;
            background-color: #5AC2FF;
            box-sizing: content-box;
        }

        .fixed {
            z-index: 999;
            position: fixed;
            top: 0;
            left: 0;
        }

        .icon-close {
            width: 22px;
            height: 22px;
            margin-right: 15px;
        }

        .img-bg {
            background-image: url("../../image/ui/bg_img.png");
            background-size: 100%;
            background-color: #5AC2FF;
            background-repeat: no-repeat;
            height: 468px;
            overflow: hidden;
        }

        .icon-complete {
            width: 22px;
            height: 22px;
            min-width: 22px;
            margin-right: 10px;
        }

        .text-title {
            font-size: 18px;
            font-weight: 500;
            color: #222224;
            line-height: 25px;
        }

        .icon-cube {
            width: 6px;
            height: 6px;
            min-width: 6px;
            margin: 0 9px;
        }

        .text-small {
            font-size: 12px;
            font-weight: 400;
            color: #222224;
            line-height: 17px;
        }

        .text-score {
            font-size: 45px;
            font-weight: 500;
            color: #FD9B43;
            text-align: center;
        }

        .box-white {
            background-color: #fff;
            border-radius: 10px 10px 0 0;
            margin-top: -248px;
        }

        .img-small {
            position: relative;
            top: -28px;
            display: block;
            width: 70px;
            height: 94px;
            border-radius: 5px;
            margin: 0 auto;
        }

        .text-name {
            font-size: 15px;
            font-weight: 500;
            color: #222224;
            line-height: 21px;
            text-align: center;
            margin-top: -14px;
        }

        .btn-orange {
            width: 96px;
            height: 36px;
            margin: 15px auto 0 auto;
            background: #FD9B43;
            border-radius: 20px;
            line-height: 36px;
            text-align: center;
            font-size: 14px;
            color: #fff;
        }

        .icon-unknown {
            width: 22px;
            height: 24px;
            min-width: 22px;
            margin: 0 9px;
        }

        .img-big {
            display: block;
            width: 167px;
            height: 220px;
            margin: 20px auto 0 auto;
            border-radius: 5px;
        }

        .img-avatar {
            position: relative;
            top: -28px;
            width: 84px;
            height: 84px;
            margin: 0 auto;
            border-radius: 50%;
        }

        .list-container {
            padding: 0 15px 15px 15px;
        }

        .text-caption {
            font-size: 16px;
            color: #222224;
            font-weight: 500;
            line-height: 22px;
            margin-top: 25px;
            margin-left: 15px;
        }

        .flex-wrap {
            flex-wrap: wrap;
        }

        .item-container {
            width: 167px;
            margin-top: 15px;
        }

        .item-cover {
            display: block;
            width: 100%;
            height: 220px;
            border-radius: 5px;
        }

        .item-score {
            font-size: 15px;
            color: #222224;
            margin-top: 13px;
        }

        .text-orange {
            font-size: 16px;
            color: #FD9B43;
        }

        .text-unread {
            font-size: 12px;
            color: #BFBFBF;
            margin-top: 5px;
            text-align: center;
        }

        .fixed-bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            padding: 10px 15px;
            background-color: #fff;
        }

        .fixed-bottom .btn {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #FD9B43;
            color: #fff;
            font-size: 15px;
            text-align: center;
            border-radius: 20px;
        }

        .list-container {
            flex-wrap: wrap;
        }

        .item-container {
            width: 25%;
            height: 44px;
            margin-top: 30px;
        }

        .circle {
            width: 44px;
            height: 44px;
            background-color: rgba(253, 155, 67, 0.2);
            color: #FF8000;
            font-size: 14px;
            line-height: 44px;
            text-align: center;
            border-radius: 50%;
        }

        .circle-error {
            width: 44px;
            height: 44px;
            background: #FF0000;
            color: #fff;
            font-size: 14px;
            line-height: 44px;
            text-align: center;
            border-radius: 50%;
        }

        .circle-correct {
            width: 44px;
            height: 44px;
            background: #fff;
            color: #8BF91B;
            font-size: 14px;
            line-height: 44px;
            text-align: center;
            border-radius: 50%;
            background-image: url('../../image/ui/correct.png');
            background-size: 100% 100%;
        }

        .tips {
            font-size: 14px;
            color: #BFBFBF;
            margin-top: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="vueApp" v-cloak>
        <header class="fixed" data-flex="cross:center main:right">
            <img src="../../image/ui/close_white.png" onclick="api.closeWin()" alt="" class="icon-close">
        </header>
        <header></header>
        <div class="img-bg">
            <div style="margin-top: 56px;" data-flex="cross:center main:center">
                <img src="../../image/ui/complete.png" alt="" class="icon-complete">
                <div class="text-title">完成答题</div>
            </div>
            <div style="margin-top: 22px;" data-flex="cross:center main:center">
                <img src="../../image/ui/cube.png" alt="" class="icon-cube">
                <div class="text-small">平均得分</div>
                <img src="../../image/ui/cube.png" alt="" class="icon-cube">
            </div>
            <div class="text-score">{{ score.toFixed(0) }}</div>
        </div>
        <div class="box-white">
            <img :src="userIcon" alt="" class="img-avatar">
            <div class="text-name">{{userName}}的学习报告</div>
            <div class="text-unread">用时：{{time|tsDate}}</div>
            <div class="list-container" data-flex>
                <!-- 62 跟读 其他 选择题 -->
                <div class="item-container" v-for="item,index in listData" data-flex="main:center">
                    <div :class="item.score|questionClass">{{typeCode == 52 ? item.score : index +1}}</div>
                </div>
                <div v-if="reportLoadEnd && !listData.length" data-flex-box="1">
                    <div class="tips">当前没有学习报告记录,快去答题吧</div>
                </div>
            </div>
        </div>
        <div style="height: 60px;background-color: #fff;"></div>
        <div class="fixed-bottom">
            <div class="btn" onclick="doAgain()">重新做题</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam;
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                typeCode: pageParam.typeCode,
                // 平均得分
                score: pageParam.score,
                // 时长
                time: pageParam.time,
                // 好
                great: 70,
                // 一般
                notBad: 30,
                // 差
                bad: 0,
                // 分数列表
                listData: [],
                // 用户头像
                userIcon: USER.Get("userIcon", true),
                // 用户名称
                userName: USER.Get("userName", true),
                // 报告是否加载完毕
                reportLoadEnd: false
            },
            filters: {
                tsDate: function(time) {
                    var hour = parseInt(time / 3600);
                    var minute = parseInt(time % 3600 / 60);
                    var second = time % 3600 % 60;
                    return (hour ? hour + '时' : '') + (minute ? minute + '分' : '') + second + '秒';
                },
                questionClass: function(sender) {
                    // sender 题目得分
                    // typeCode 52 跟读 3级颜色
                    // 其他 选择题 0 错误 100 正确
                    var result = 'circle-correct';
                    if(vm.typeCode == 52) {
                        if(sender < vm.great && sender >= vm.notBad) {
                            result = 'circle';
                        }else if(sender < vm.notBad) {
                            result = 'circle-error';
                        }
                    }else if(sender != 100) {
                        result = 'circle-error';
                    }
                    console.error(result +'==题目class')
                    return result;
                }
            }
        });
        getData();
        setTimeout(function() {
            api.closeWin({
                name: 'video/answer_detail'
            });
        }, 200)
    }

    // 重新做题
    function doAgain() {
        fnDelayCloseWin();
        fnOpenPublicWin(pageParam.catalogName, 'video/answer_detail', {
            isBtn: true,
            btnName: '00:00',
            typeCode: pageParam.typeCode,
            catalogId: pageParam.catalogId,
            catalogName: pageParam.catalogName
        });
    }

    // 获取题结果
    function getData() {
        var url = 'question/findQuestionList';
        var params = {
            id: pageParam.catalogId,
            questionTypeCode: pageParam.typeCode
        };
        var callback = function(data) {
            data.listData.forEach(function(item, index) {
                if(item.userAnswerScore) {
                    item.score = Number(item.userAnswerScore);
                } else {
                    item.score = Number(item.stuAnswerResultDetailScoreValue);
                }
            });
            vm.listData = data.listData;
            vm.reportLoadEnd = true;
        }
        POST(url, params, callback);
    }
</script>
</html>
